<template>
  <div class="evaluate-record">
    <div class="evaluate-record__search card">
      <el-form inline>
        <el-form-item label="评价年月">
          <el-date-picker
            v-model="params.time[0]"
            type="month"
            placeholder="选择开始年月"
            value-format="yyyy-MM"
          />
          -
          <el-date-picker
            v-model="params.time[1]"
            type="month"
            placeholder="选择结束年月"
            value-format="yyyy-MM"
          />
        </el-form-item>

        <el-form-item label="评价结果">
          <el-select
            v-model="params.result"
            placeholder="请选择"
            style="width: 200px;"
            clearable
          >
            <el-option
              label="正面评价"
              :value="0"
            />

            <el-option
              label="负面评价"
              :value="1"
            />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            @click="handleSearch"
          >
            查询
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="evaluate-record__content card">
      <el-table
        v-loading="loading"
        :data="list"
        border
        stripe
      >
        <el-table-column label="序号" type="index" align="center" width="80" />
        <el-table-column label="评价年月" prop="evaluate_record.time" align="center" />
        <el-table-column label="被评人" prop="user.username" align="center" />
        <el-table-column label="评价人" prop="evaluate_record.user.username" align="center" />
        <el-table-column label="评价结果" prop="evaluate_record.user.username" align="center">
          <template v-slot="{ row }">
            {{ row.result ? '负面评价' : '正面评价' }}
          </template>
        </el-table-column>

        <el-table-column label="操作" prop="user.gender" align="center">
          <template v-slot="{ row }">
            <el-button
              type="text"
              @click="handleOpenDetailsDialog(row)"
            >
              查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <Pagination
        style="margin-top: 0; padding-bottom: 0;"
        :total="total"
        :limit="params.paginate"
        @pagination="pagination"
      />
    </div>

    <EvaluateDetailDialog
      :visible.sync="detailsDialogVisible"
      :details="recordDetails"
      title="详情查看"
    />

  </div>
</template>
<script>
import { getAppraisedPersonnelResult, getAppraisedPersonnelResultDetails } from '@/api/evaluate'
import Pagination from '@/components/Pagination/index.vue'
import { sleep } from '@/utils'
import EvaluateDetailDialog from '@/views/evaluate/components/EvaluateDetailDialog.vue'
import dayjs from 'dayjs'
export default {
  name: '',
  components: {
    Pagination,
    EvaluateDetailDialog
  },
  data() {
    return {
      list: [],
      params: {
        time: [],
        user_id: null,
        result: null,
        page: 1,
        paginate: 10
      },
      total: 0,
      loading: false,
      recordDetails: null,
      detailsDialogVisible: false
    }
  },
  created() {
    this.timeInit()
    this.getAppraisedPersonnelResult()
  },

  methods: {
    async getAppraisedPersonnelResult() {
      this.loading = true

      try {
        const res = await getAppraisedPersonnelResult({
          ...this.params,
          time: this.params.time.length ? JSON.stringify(this.params.time) : null
        })
        this.list = res.data.data
        this.total = res.data.total
        console.log('res --------->', res)
      } catch (error) {
        this.$message.error('评价记录获取失败')
      } finally {
        await sleep(500)
        this.loading = false
      }
    },

    pagination(page) {
      this.params.page = page.page
      this.params.paginate = page.limit
      this.getAppraisedPersonnelResult()
    },

    handleOpenDetailsDialog(row) {
      console.log('row --------->', row)
      this.recordDetails = row
      this.detailsDialogVisible = true
    },

    handleSearch() {
      if (this.params.time.length === 1) return this.$message.error('请选择完整的评价年月')
      const time1 = this.params.time[0]
      const time2 = this.params.time[1]
      if (!time1 || !time2) this.params.time = []

      if (dayjs(time1).isAfter(time2)) {
        return this.$message.error('评价年月起始时间要早于结束时间')
      }

      this.params.page = 1
      this.getAppraisedPersonnelResult()
    },

    timeInit() {
      const time = dayjs()
      const currentDay = time.date()

      if (currentDay >= 25) {
        const t = time.format('YYYY-MM')
        this.params.time = [t, t]
      } else {
        const t = time.subtract(1, 'month').format('YYYY-MM')
        this.params.time = [t, t]
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.evaluate-record {
  padding: 20px;

  &__search {
    ::v-deep(.el-form-item) {
      margin-bottom: 0;
      margin-right: 20px;
      .el-form-item__label {
        font-weight: 400;
      }
    }
  }
}
</style>
